@extends('admin.common.admin')
@section('css')
    <style>
        .row {
            margin-top: 20px;
        }
    </style>
@endsection
@section('cnt')
    {{--面包屑导航--}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>管理员管理
        <span class="c-gray en">&gt;</span>添加权限
        <a class="btn btn-success radius r" style="line-height: 1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <article class="page-container">
        {{--消息提示--}}
        @include('admin.common.msg')
        <form class="from form-horizontal" id="nodeadd" action="{{route('admin.node.store')}}" method="post">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>上级权限：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width: 200px">
				<select id="pid" name="pid" class="select">
					<option value="0">==顶级权限==</option>
                    @foreach($data as $item)
                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                    @endforeach
				</select>
				</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2">
                    <span class="c-red">*</span>是否为菜单：
                </label>
                <div class="formControls col-sm-10 skin-minimal">
                    <div class="radio-box">
                        <input type="radio" name="is_menu" value="0" id="is_menu-1" checked>
                        <label for="is_menu-1">否</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" name="is_menu" value="1" id="is_menu-2" checked>
                        <label for="is_menu-2">是</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2">
                    <span class="c-red">*</span>权限名称：
                </label>
                <div class="formControls col-sm-8">
                    <input type="text" class="input-text" value="{{old('name')}}" name="name">
                </div>
            </div>
            <div class="row cl" id="routename" style="display: none">
                <label class="form-label col-sm-2">路由别名：</label>
                <div class="formControls col-sm-8">
                    <input type="text" class="input-text" value="{{old('route_name')}}" name="route_name">
                </div>
            </div>
            <div class="row cl" style="margin-top: 20px">
                <div class="col-sm-10 col-sm-offset-2">
                    <input type="submit" class="btn btn-primary radius" value="添加权限">
                </div>
            </div>

        </form>
    </article>
@endsection
@section('js')
    <script>
        let menu = 0;
        //美化单选框
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        //绑定下拉列表事件
        $('#pid').change(function () {
            menu = Number($(this).val());
            if (menu > 0) {
                //显示路由别名输入框
                $('#routename').slideDown();
            } else {
                $('#routename').slideUp();
            }
        });
        //表单验证
        $('#nodeadd').validate({
            //验证规则
            rules: {
                name: {
                    required: true,
                    minlength: 2
                }
            },
            //取消回车事件
            onkeyup: false,
            //验证成功时的样式名称
            success: 'valid',
            //验证成功后，回调事件
            submitHandler: function (form) {
                //js表单提交
                form.submit();
            }
        });
    </script>
@endsection
